<template>
  <div class="user-info">
    <a-layout>
      <a-layout-sider :width="356">
        <a-card hoverable :style="{ width: '300px', marginLeft: '30px' }">
          <template #cover>
            <div
              :style="{
                height: '170px',
                overflow: 'hidden',
              }"
            >
              <a-avatar
                imageUrl="https://pic.code-nav.cn/user_avatar/1685589863325241345/thumbnail/zab10pig-avatar_1645370272.webp"
                :size="120"
                style="margin-top: 30px"
              >
              </a-avatar>
            </div>
          </template>
          <a-card-meta :title="store.state.user.loginUser.userName">
            <template #description>
              <div>无糖可乐程序员一枚</div>

              <div style="margin-top: 10px">
                <a-button
                  type="primary"
                  shape="round"
                  @click="addSignInfo"
                  :disabled="isSigned"
                  >{{ butIsSigned }}
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-layout-sider>
      <a-layout-content>
        <div>
          <a-card :bordered="false" title="用户签到信息">
            <MySinMap></MySinMap>
          </a-card>
          <a-card :bordered="false" title="刷题记录">暂无刷题记录</a-card>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>
<script setup lang="ts">
import { useStore } from "vuex";
import MySinMap from "@/components/MySinMap.vue";
import { computed, onMounted, ref } from "vue";
import { UserControllerService } from "../../../generated";
import message from "@arco-design/web-vue/es/message";

const store = useStore();
const isSigned = ref(false);
const butIsSigned = computed(() => (isSigned.value ? "✔已签到" : "点击签到"));

function addSignInfo() {
  UserControllerService.addUserSignInUsingGet().then((res) => {
    if (res.code === 0) {
      message.success("签到成功，明天继续努力吧~");
      isSigned.value = true;
      setTimeout(() => {
        location.reload();
      }, 1500);
    }
  });
}
onMounted(() => {
  UserControllerService.getOneSignInInfoUsingGet().then((res) => {
    isSigned.value = res.data;
  });
});
</script>

<style scoped>
.user-info {
  margin-left: 200px;
  margin-right: 100px;
}

:deep(.arco-layout-content) {
  //flex-direction: column; //justify-content: center; height: 100%; //color: var(--color-white); //font-size: 20px; //font-stretch: condensed;
}

:deep(.arco-layout-sider) {
  //width: 206px; text-align: center; //display: flex; //height: 500px; //background-color: var(--color-primary-light-3);
}

:deep(.arco-layout-content) {
  //background-color: rgb(var(--arcoblue-6));
}
</style>
